<template>
  <div>
    <!-- 课程信息 -->
    <div class="course-info">
      <h2>课程详情 - {{ course.courseName }}</h2>
      <el-card header="课程信息">
        <div>
          <el-row>
            <el-col :span="6">课序号: {{ $route.params.courseId }}</el-col>
            <el-col :span="6">课程名:<span v-if="!editing">{{ course.courseName }}</span>
              <span v-else>
               <el-input v-model="course.courseName"></el-input>
              </span>
            </el-col>
            <el-col :span="6">授课教师: {{ course.teacherName }}</el-col>
          </el-row>
        </div>
        <div class="course-description">
          <el-divider></el-divider>
          <h3>课程详细说明</h3>
          <p><span v-if="!editing">{{ course.profile }}</span>
            <span v-else>
              <el-input v-model="course.profile"></el-input>
            </span>
          </p>
        </div>
        <el-col :span="6" v-if="kind === 1" disabled>
        </el-col>
        <el-col :span="6" v-else>
          <el-button @click="toggleEditing">{{ editing ? '取消' : '编辑' }}</el-button>
          <el-button @click="saveChanges" :disabled="!editing">保存</el-button>
        </el-col>
      </el-card>
    </div>

    <!-- 学生名单表格 -->
    <div class="student-list">
      <h2>学生名单</h2>
      <el-card>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="ID" prop="studentId"></el-table-column>
          <el-table-column label="姓名" prop="name"></el-table-column>
          <el-table-column label="性别" prop="gender"></el-table-column>
          <el-table-column label="手机号" prop="phone"></el-table-column>
          <el-table-column label="邮箱" prop="email"></el-table-column>
        </el-table>
        <el-pagination
            background="true"
            layout="prev, pager, next"
            :total="total"
            v-model:currentPage="queryInfo.page"
            :page-size="queryInfo.size"
            @current-change="handlePageChange"
        />
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
import { getStudent } from '@/api/student'
import { getInfo } from '@/api/info'
import { changeCourse } from '@/api/coursechange'

const route = useRoute()
const store = useStore()
const total = ref(0)

onMounted(() => {
  kind.value = store.state.kind
  console.log(kind.value)
})

const kind = ref(store.state.kind)

const currentPage = ref(1)

const queryInfo = ref({
  courseId: route.params.courseId,
  page: currentPage,
  size: 5
})

const courseInfo = {
  courseId: route.params.courseId
}

const tableData = ref([])

const course = ref({
  courseId: '',
  courseName: '',
  teacherName: '',
  profile: ''
})

const editing = ref(false)

const getStudentList = async () => {
  const res = await getStudent(queryInfo.value)
  tableData.value = res.data.data.rows
  total.value = res.data.data.total
}

const getDetail = async () => {
  const res = await getInfo(courseInfo)
  course.value.courseId = res.data.data.course_id
  course.value.courseName = res.data.data.courseName
  course.value.teacherName = res.data.data.teacherName
  course.value.profile = res.data.data.profile
}

const toggleEditing = () => {
  editing.value = !editing.value
}

const saveChanges = async () => {
  editing.value = false
  const res = await changeCourse(course.value)
  console.log(res)
}

const handlePageChange = async () => {
  getStudentList()
}

onMounted(getDetail)
onMounted(getStudentList)
</script>

<style scoped>
.course-info {
  margin-bottom: 20px;
}

.course-info span {
  margin-right: 10px;
}

.course-description {
  margin-top: 10px;
}

.student-list {
  margin-top: 20px;
}

table {
  width: 100%;
}

th, td {
  text-align: center;
  padding: 5px;
  border: 1px solid #ccc;
}

th {
  background-color: #f0f0f0;
}
</style>
